<template>
  <div class="container">
    <nav-bar title="搜索" />
    <!-- 搜索 -->
    <div class="search">
      <div class="search-area">
        <input type="text" :value="keywords" @input="keywordsInput">
        <button @click="search">搜索</button>
      </div>
    </div>
    <div class="products">
      <div class="tips" v-if="searched && productList.length === 0">未搜索到匹配结果</div>
      <div class="list">
        <!-- 为你推荐 -->
        <div 
          class="item" 
          v-for="(item, index) in productList" 
          :key="index"
          @click="goToProduct(item.ProductId)"
        >
          <div class="img"><img :src='item.ImagePath' @error="defaultImg(defaultImgUrl)"/></div>
          <div class="name">{{item.ProductName}}</div>
          <!-- <div class="dis"></div> -->
          <div class="price">
            <h3>¥<span>{{item.MinSalePrice}}</span></h3>
            <h4 v-if="item.MinSalePrice!==item.MarketPrice">¥{{item.MarketPrice}}</h4>
          </div>
        </div>
      </div>
    </div>
    <div class="loading" v-if="loading">
      <van-loading type="spinner" size="24px" />
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { defaultImg } from '../../utils/'
import { getProductList } from '../../network/productList'

export default {
  name: 'Search',
  components: {
    NavBar
  },
  data(){
    return {
      searched: false,
      keywords: '',
      productList: [],
      defaultImgUrl: require('../../assets/img/recommand-none.png'),
      loading: false,
    }
  },
  methods: {
    keywordsInput(e){
      this.keywords = e.target.value
    },
    search(){
      this.searched = false
      this.loading = true
      this.productList = []

      let requestData = {
        pageNo: 1,
        pageSize: 500,
        keywords: this.keywords
      }
      getProductList(requestData, list => {
        list = list.map(item => {
          item.SalePrice = item.SalePrice.toFixed(2)
          item.MinSalePrice = item.MinSalePrice.toFixed(2)
          item.MarketPrice = item.MarketPrice.toFixed(2)
          return item
        })
        this.productList = list
        this.searched = true
        this.loading = false
      })
    },
    defaultImg(imgUrl){
      defaultImg(imgUrl)
    },
    goToProduct(id){
      this.$router.push({
        path: '/product',
        query: {
          id,
        }
      })
    },
  },
  mounted() {
    this.keywords = this.$route.query.keywords
    this.searched = false
  },
}
</script>

<style scoped>
.container{
  background-color: #f2f2f2;
}
.search{
  padding: 10px 10px 30px 10px;
  background-color: #000000;
}
.search-area{
  display: flex;
  justify-content: stretch;
  height: 36px;
  border-radius: 36px;
  overflow: hidden;
  background-color: #ffffff;
}
.search-area input{
  flex-grow: 1;
  text-indent: 15px;
}
.search-area button{
  width: 100px;
  margin: 1px;
  height: 34px;
  border-radius: 34px;
  color: #ffffff;
  background-color: #000000;
}
.products{
  position: relative;
  margin-top: -15px;
  padding: 10px;
  border-radius: 10px 10px 0 0;
  background-color: #f2f2f2;
  z-index: 2;
}
.products .list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.products .list .item{
  width: 49%;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff;
}
.products .list .item .img{
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}
.products .list .item img{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 6px 6px 0 0;
}
.products .list .item .name{
  font-size: 14px;
  height: 45px;
  margin-bottom: 2px;
  padding: 8px 10px 3px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  box-sizing: border-box;
}
.products .list .item .dis{
  font-size: 14px;
  color: #8c8c8c;
  padding: 0 10px 5px 10px;
}
.products .list .item .price{
  display: flex;
  align-items: flex-end;
  padding: 3px 10px 20px 10px;
}
.products .list .item .price h3{
  color: #d50721;
  padding-right: 15px;
}
.products .list .item .price h3 span{
  font-size: 18px;
  padding: 3px;
}
.products .list .item .price h4{
  color: #8c8c8c;
  text-decoration: line-through;
}
.tips{
  text-align: center;
  padding-top: 30px;
  color: #cccccc;
}
.loading{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  z-index: 999;
}
</style>